<!DOCTYPE HTML>
<html lang="en-US">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>Income Deposit</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
  <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" type="text/css" href="./css/font.css"/>
  </head>
  <style type="text/css">
  	.centPage {
		padding-bottom: 25px;
  		border-radius: 8px;
  		margin-left: 16px;
  		margin-right: 16px;
  		margin-top: 21px;
  		background-image: linear-gradient(250deg, #4199f2, #2b57da);
  	}
	.but-pay{
		width: 100%;
		height: 50px;
		background-color: #2B57DA;
		color: #FFFFFF;
		position: fixed;
		bottom: 0px;
	
		text-align: center;
		line-height: 50px;
		size: 50px;
		margin:auto;
		left:0;
		right:0;
		font-weight: 600;
	}
  </style>
  <body>
    <div class="bui-page bui-box-vertical">
        <header>
            <!-- 固定顶部区 -->
          <div class="bui-bar" style="background-color: #FFFFFF;">
          	<div class="bui-bar-left">
          		<a class="bui-btn" onclick="bui.back();"><i class="icon-back" style="color: black;"></i></a>
          	</div>
          	<div class="bui-bar-main" style="color: black; font-weight: 700;">
          		Income Deposit
          	</div>
          	<div class="bui-bar-right">
          	</div>
          </div>
        </header>
        <main>
          <!-- 固定中间滚动内容区 -->
		  <div class="centPage">
		  	<div class="bui-box-space example-box3">
		  		<div class="span1">
		  			<h1 class="" style="color: white;margin: 16px; font-size: 14px;font-weight: 600;">Fixed deposit rate of return</h1>
		  		</div>
		  					
		  	</div>
		  	<div class="bui-box-space example-box3">
		  		<div class="span1" style="text-align: center;color: white;">
		  			<h1>5%</h1>
		  			<h5>week</h5>
		  		</div>
		  		<div class="span1" style="text-align: center;color: white;">
		  			<h1>25%</h1>
		  			<h5>month</h5>
		  		</div>
		  		<div class="span1" style="text-align: center;color: white;">
		  			<h1>150%</h1>
		  			<h5>quarter</h5>
		  		</div>
		  	</div>
		  </div>
		  <div class="bui-box">
			  <div class="span1" style="margin-top: 15px;">
				  <h3 style="margin-left: 15px;color: #000000;">income： <span style="color: #2B57DA;"> Rs 0.00</span></h3>
				  
			  </div>
			  <div class="span1" style="margin-top: 15px;">
			  		<h3 style="color: #000000;"> amount：1000000.00 </h3>		  
			  				  
			  </div>
		  </div>
		  <div class="bui-box" style="margin-top: 10px;">
			  <div class="span1">
				  <h3 style="color: #000000;margin-left: 15px;">Income</h3>		 
			  </div>
			  <div class="span3" style="text-align: center;">
				  remaining：88 day
				  </div>
			  <div class="span1">
				  <div style="background-color: #2B57DA;padding: 3px; width: 50px;color: white;text-align: center;border-radius: 50px;margin-right: 15px;">
					  take
				  </div>
			  </div>
		  </div>
		  <div class="but-pay"> Deposit</div>
        </main>
        <footer>
          <!-- 固定底部   -->
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
    <script>
        bui.ready(function() {
          // 所有控件及方法需要在这里执行
        })
    </script>
  </body>
</html>
